<template>
  <div class="container">
    <el-card class="card">
      <!-- 卡片头部标题 -->
      <template #header>
        <div class="card-header">
          <span>挂号订单</span>
        </div>
      </template>
      <div class="content">
        <!-- 两个下拉列表框 -->
        <div class="top">
          <div class="left">
            <span style="margin-right: 10px">就诊人</span>
            <el-select
              v-model="patientId"
              placeholder="全部就诊人"
              style="width: 240px"
              @change="getUserOrder(1)"
            >
              <el-option label="全部就诊人" value=" " />
              <el-option
                v-for="item in allPatient"
                :key="item.patientId"
                :label="item.name"
                :value="item.patientId"
              />
            </el-select>
          </div>
          <div class="right">
            <span style="margin-right: 10px">订单状态</span>
            <el-select
              v-model="orderStatus"
              placeholder="所有订单"
              style="width: 240px"
              @change="getUserOrder(1)"
            >
              <el-option label="所有订单" value=" " />
              <el-option
                v-for="item in orderStatusList"
                :key="item.status"
                :label="item.comment"
                :value="item.status"
              />
            </el-select>
          </div>
        </div>
        <div class="center" v-loading="loading">
          <el-table
            :data="orderList"
            :row-class-name="tableRowClassName"
            stripe
          >
            <el-table-column
              prop="reserveDate"
              label="就诊时间"
              align="center"
            />
            <el-table-column prop="hosname" label="医院" align="center" />
            <el-table-column prop="depname" label="科室" align="center" />
            <el-table-column
              prop="title"
              label="医生"
              width="100"
              align="center"
            />
            <el-table-column
              prop="amount"
              label="费用"
              width="80"
              align="center"
            />
            <el-table-column
              prop="patientName"
              label="就诊人"
              width="100"
              align="center"
            />
            <el-table-column
              prop="param.orderStatusString"
              label="订单状态"
              align="center"
            />
            <el-table-column prop="name" label="操作" width="80" align="center">
              <template #default="{ row }">
                <div class="detail" @click="goDetails(row)">详情</div>
              </template>
            </el-table-column>
            <!-- 内容为空时展示的插槽 -->
            <template #empty>
              <el-empty
                image="https://img2.baidu.com/it/u=2917271785,3048547439&fm=253&fmt=auto&app=138&f=PNG?w=288&h=288"
                description="暂无数据"
                :image-size="200"
              />
            </template>
          </el-table>
        </div>
      </div>
      <!-- 卡片底部分页器 -->
      <template #footer>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          layout=" prev, pager, next, jumper,->,sizes,total,"
          :total="total"
          @size-change="getUserOrder(1)"
          @current-change="getUserOrder"
        />
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="AllOrder">
import { reqAllPatient } from '@/api/patient'
import { reqOrderStatus, reqUserOrder } from '@/api/user'
import type { OrderStatus, Records, UserOrder } from '@/api/user/type'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由器对象
const router = useRouter()
// 控制加载效果
let loading = ref(false)
// 存储分页器当前页数
let currentPage = ref(1)
// 存储分页器每页显示条数
let pageSize = ref(10)
// 存储总页数
let total = ref(0)
// 存储下拉列表框选择的就诊人id
let patientId = ref('')
// 存储下拉列表框订单状态的值
let orderStatus = ref('')
// 存储用户订单列表
let orderList = ref<Records>([])
// 存储全部就诊人的姓名和id
let allPatient = ref<{ patientId: string; name: string }[]>([])
// 存储订单全部状态
let orderStatusList = ref<OrderStatus[]>([])

// 根据支付状态为不同表格添加不同类名,动态设置列的颜色
const tableRowClassName = ({ row }: { row: UserOrder }) => {
  if (row.orderStatus == 0) {
    // 待支付状态
    return 'warning-row'
  } else if (row.orderStatus == 1) {
    // 支付成功状态
    return 'success-row'
  } else {
    // 取消支付状态
    return 'danger-row'
  }
}
// 获取用户订单信息(当改变每页的页数时,自动返回第一页)
const getUserOrder = async (pager = currentPage.value) => {
  currentPage.value = pager
  // 开启加载效果
  loading.value = true
  // 获取当前页数据
  let result = await reqUserOrder(
    currentPage.value,
    pageSize.value,
    patientId.value,
    orderStatus.value,
  )
  if (result.code === 200) {
    // 存储用户订单数据
    orderList.value = result.data.records
    // 存储订单总条数
    total.value = result.data.total
    // 关闭加载效果
    loading.value = false
  } else {
    ElMessage.error('获取用户订单信息失败')
  }
}
// 点击详情按钮路由跳转到订单详情页
const goDetails = (row: UserOrder) => {
  // 编程式路由导航,携带query参数orderId来区分是全部挂号订单页,还是订单详情页
  router.push({
    name: 'order',
    query: {
      orderId: row.id,
    },
  })
}
// 组件挂载完毕获取用户订单数据
onMounted(async () => {
  // 获取用户订单信息
  getUserOrder()
  // 获取全部就诊人信息
  let result1 = await reqAllPatient()
  // 获取全部订单状态
  let result2 = await reqOrderStatus()
  if (result1.code === 200 && result2.code === 200) {
    // 存储用户数据
    allPatient.value = result1.data.map((item: any) => {
      return {
        patientId: item.id,
        name: item.name,
      }
    })
    // 存储订单全部状态
    orderStatusList.value = result2.data
  } else {
    ElMessage.error('获取用户数据错误！')
  }
})
</script>

<style scoped lang="scss">
.container {
  .card {
    color: $base-color;
    .card-header {
      font-size: 20px;
    }
    .content {
      .top {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 20px;
        .left {
          margin: 0 50px 0 40px;
        }
      }
    }
  }
}
// 根据不同的类名设置不同行的样式
:deep(.el-table) {
  .warning-row {
    color: #409eff;
    font-weight: bold;
  }
  .success-row {
    color: rgb(8, 227, 92);
    font-weight: bold;
  }
  .danger-row {
    color: rgb(224, 87, 87);
    font-weight: bold;
  }
  .detail {
    cursor: pointer;
  }
}
</style>
